<template>
  <div>
    <el-breadcrumb >
      <el-breadcrumb-item><i class="el-icon-s-tools"></i> 角色管理</el-breadcrumb-item>
    </el-breadcrumb>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="query.name" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getRoles"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addRole">增加角色</el-button>
      </el-col>
    </el-row>

      <el-table
        :data="roles"
        style="width: 100%">
        <el-table-column
          prop="cname"
          label="名称"
        >
        </el-table-column>
        <el-table-column
                prop="remarks"
                label="备注"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="deleteRole(scope.row)" type="danger" size="mini" icon="el-icon-delete">删除</el-button>
            <el-button type="primary" size="small" icon="el-icon-edit" @click="editOpen(scope.row)">修改</el-button>
            <el-button type="primary" size="small" icon="el-icon-s-tools" @click="openRight(scope.row)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[5, 10, 15, 30]"
      :page-size="query.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
    <el-dialog :close-on-click-modal="false"
               title="新增角色"
               :visible.sync="addDialogVisible"
               width="50%">
      <el-form ref="form" :model="role" label-width="80px">
        <el-form-item label="角色名">
          <el-input v-model="role.cname"></el-input>
        </el-form-item>
        <el-form-item label="是否停用">
          <el-switch
                  style="display: block"
                  v-model="role.isdel"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="已停用"
                  inactive-text="未停用">
          </el-switch>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="role.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false"
               title="修改角色"
               :visible.sync="editDialogVisible"
               width="50%">
      <el-form ref="form" :model="role" label-width="80px">
        <el-form-item label="角色名">
          <el-input v-model="role.cname"></el-input>
        </el-form-item>
        <el-form-item label="是否停用">
          <el-switch
                  style="display: block"
                  v-model="role.isdel"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="已停用"
                  inactive-text="未停用">
          </el-switch>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="role.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="权限设置"
      :visible.sync="rightDialogVisible"
      width="50%"
      @close="resetChecked"
      >
      <el-tree
        :data="rights"
        show-checkbox
        default-expand-all
        :default-checked-keys="hasRights"
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps">
      </el-tree>

      <div class="buttons">
        <el-button @click="getCheckedNodes">通过 node 获取</el-button>
        <el-button @click="getCheckedKeys">通过 key 获取</el-button>
        <el-button @click="setCheckedNodes">通过 node 设置</el-button>
        <el-button @click="setCheckedKeys">通过 key 设置</el-button>
        <el-button @click="resetChecked">清空</el-button>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePermission">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
  import {getData,postData,putData,deleteData} from '../api/index'
  export default {
    name: "Role",
    mounted() {
      this.getRoles()
      this.getrights()
    },
    methods:{
      async savePermission() {
        const permId = [...this.$refs.tree.getCheckedKeys()
          , ...this.$refs.tree.getHalfCheckedKeys()]
                .map(permid => {
                  return {id1: permid, id2: this.roleId}
                })
       const  res = await  postData("sys/permission/" + this.roleId, permId)
        if(res.code === 20000){
         this.$message.success(res.msg)
          this.rightDialogVisible=false
        }else {
          this.$message.error(res.msg)
        }

      },
      async edit() {
        const res = await putData("/sys/role/" + this.role.id, this.role)
        if(res.code === 20000){
          this.editDialogVisible = false
          this.$message.success(res.msg)
          await this.getRoles()
        }else {
          this.$message.error(res.msg)
        }
      },
      editOpen(roleInfo){
        this.editRole = roleInfo
        this.role = JSON.parse(JSON.stringify(roleInfo))
        this.editDialogVisible =true
      },
      deleteRole(roleInfo){
        this.$confirm('您真的要删除此纪录吗?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async  () => {
          const res = await deleteData("/sys/role/"+roleInfo.id)
          if(res.code === 20000){
            this.$message.success(res.msg)
            await  this.getRoles()
          }else{
            this.$message.error(res.msg)
          }
        }).catch(() => {

        });
      },
        async add() {
          const res = await postData('/sys/role', this.role)
          if(res.code===20000){
            this.addDialogVisible = false
            await this.getRoles()
            this.$message.success(res.msg)
          }else{
            this.$message.error(res.msg)
          }
      },
      addRole(){
        this.role ={}
        this.addDialogVisible = true
      },

     async getRightsByRoleId(){
        const res =await getData("/sys/permission/rightsByRoleId/"+this.roleId)
       if(res.code ===20000){
this.hasRights=res.data
       }
      },
      async getRoles() {
        const res =await getData('/sys/role', this.query)
        if(res.code ===20000){
          this.roles =res.data.data
          this.total =res.data.total
        }

      },
      async getrights() {
        const res =await getData('/sys/permission/right')
        if(res.code ===20000){
          this.rights =res.data
        }

      },
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      },
      openRight(roleinfo){
        this.rightDialogVisible =true
        this.roleId=roleinfo.id
        this.getRightsByRoleId()
      },
      handleSizeChange(val) {
        this.query.size =val
        this.getRoles()
      },
      handleCurrentChange(val) {
       this.query.page =val;
       this.getRoles()
      }
    },
    data(){
      return{
        editDialogVisible:false,
        addDialogVisible: false,
        role:{},
        roleId: -1,
        hasRights:[],
        query: {
          name: '',
          page: 1,
          size: 5
        },
        rules: {
          cname: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ]
        },
        rights: [],
        defaultProps: {
          children: 'children',
          label: 'cname'
        },
        rightDialogVisible: false,
        total: 0,
        roles: []
      }
    }

  }
</script>

<style scoped>

</style>
